<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>tix-demo-cube</title>
</head>
<style>
    .wrap {
        width: 500px;
        height: 500px;
        perspective: 800px;
        /* 旋转原点 */
        perspective-origin: 50% 100px;
        margin-top: 300px;
        margin-left: 300px;
    }

    .cube {
        position: relative;
        width: 200px;
        height: 200px;
        /* 确保6个面都处于3D立体状态 */
        transform-style: preserve-3d;
        animation: spin 6s linear infinite;
        /*设置动画*/
    }

    .cube div {
        position: absolute;
        width: 200px;
        height: 200px;
        text-align: center;
        line-height: 200px;
        color: rgba(0, 0, 0, 0.5);
        font-family: sans-serif;
        text-transform: uppercase;
        background: rgba(255, 255, 255, 0.1);
        box-shadow: inset 0 0 30px rgba(125, 125, 125, 0.8);
    }

    /* 上下左右 */
    @keyframes spin {
        /* from { transform: rotateY(0); }
    to { transform: rotateY(360deg); } */

        0% {
            transform: rotateX(0deg);
        }

        25% {
            transform: rotateX(180deg);
        }

        50% {
            transform: rotateX(360deg) rotateY(0deg);
        }

        75% {
            transform: rotateX(360deg) rotateY(180deg);
        }

        100% {
            transform: rotateX(360deg) rotateY(360deg);
        }
    }


    .back {
        transform: translateZ(-100px) rotateY(180deg);

    }

    .right {
        transform: rotateY(-270deg) translateX(100px);
        transform-origin: top right;

    }

    .front {
        transform: translateZ(100px);

    }

    .left {
        transform: rotateY(270deg) translateX(-100px);
        transform-origin: center left;

    }

    .top {
        transform: rotateX(-90deg) translateY(-100px);
        transform-origin: top center;

    }

    .bottom {
        transform: rotateX(90deg) translateY(100px);
        transform-origin: bottom center;

    }


    /*扁平*/
    /* .wrap {
    no more perspective 
    perspective: none;
    perspective-origin: 0 0;
} */
</style>

<body>
    <header class="header" style="display:none;">
        <div class="wp">
            <div class="container-wp">
                <div class="header-main">
                    <div class="logo"><img src="https://tix.youyoubai.com/public/img/tix.bfecadce.png"></div>
                    <div class="minapp">
                        <div class="menu">
                            <ul>
                                <li><a title="首页" href="https://tix.youyoubai.com" class="active">首页</a></li>
                                <li><a title="文章" href="https://tix.youyoubai.com/article/article.html">文章</a></li>
                                <li><a title="导航" href="https://tix.youyoubai.com">导航</a></li>
                                <li><a title="排行" href="https://tix.youyoubai.com">排行</a></li>
                                <li class="last"><span></span> <span></span> <span></span>
                                    <div class="nav-div" style="display:none;">
                                        <nav class="nav">
                                            <div class="small-nav"><a target="_blank"
                                                    href="https://tix.youyoubai.com/detail/14.html">常见问题</a></div>
                                            <div class="small-nav"><a
                                                    href="https://tix.youyoubai.com/detail/15.html">开发规范</a>
                                            </div>
                                            <div class="small-nav"><a
                                                    href="https://tix.youyoubai.com/about/about.html">关于我们</a></div>
                                        </nav>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <div class="wrap">
        <div class="cube">
            <div class="front">front</div>
            <div class="back">back</div>
            <div class="top">top</div>
            <div class="bottom">bottom</div>
            <div class="left">left</div>
            <div class="right">right</div>
        </div>
    </div>

</body>

</html>